<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }
    
    body {
        background-color: grey;
    }
    
    table {
        border-collapse: collapse;
        width: 300px;
    }
    
    td,
    th {
        width: 200px;
        border: 1px solid black;
    }
    
    .box {
        margin: 0 auto;
        margin-top: 100px;
        width: 800px;
        background-color: white;
        padding: 30px;
    }
    
    table {
        margin: 0 auto;
        margin-top: 30px;
    }
    
    ul {
        margin-left: 100px;
        width: 300px;
    }
    
    ul li {
        float: left;
        padding-right: 20px;
    }
</style>

<body>
    <div class="box">
        商品：<input type="text" class="input_name"> 价格： <input type="text" class="input_price"> 数量：
        <input type="text" class="input_number">
        <button class="btn_add">添加</button>&nbsp&nbsp&nbsp&nbsp&nbsp
        <button class="btn_z">价格正序</button>
        <button class="btn_d">价格倒序</button>&nbsp&nbsp&nbsp&nbsp&nbsp 请输入商品名称 <input type="text" class="search"><button class="btn_srh">搜索</button>
        <table>
            <thead>
                <tr>
                    <th>商品</th>
                    <th>价格</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <ul>
            <a>查询结果在这：</a>
        </ul>
    </div>

</body>
<script>
    var array = [{
        name: "电饭煲",
        price: 200,
        number: "3"
    }, {
        name: "电视机",
        price: 1000,
        number: "1"
    }, {
        name: "抽油烟机",
        price: 300,
        number: "2"
    }, {
        name: "微波炉",
        price: 500,
        number: "10"
    }]
    window.onload = function() {
        var inputName = document.querySelector(".input_name");
        var inputPrice = document.querySelector(".input_price");
        var inputNumber = document.querySelector(".input_number");
        var searchBox = document.querySelector(".search");
        var btnAdd = document.querySelector(".btn_add");
        var btnZ = document.querySelector(".btn_z");
        var btnD = document.querySelector(".btn_d");
        var tbody = document.querySelector("tbody");
        var btnSrh = document.querySelector(".btn_srh");
        var ul = document.querySelector("ul");
        // 显示数据
        var content = "";
        for (var i = 0; i < array.length; i++) {
            content = content + "<tr><td>" + array[i].name + "</td><td>" + array[i].price + "</td><td>" + array[i].number + "</td></tr>";
        }
        tbody.innerHTML = content;
        // 添加
        btnAdd.addEventListener("click", function(e) {
            var inputNames = inputName.value;
            var inputPrices = inputPrice.value;
            var inputNumbers = inputNumber.value;
            if (inputNames == "" || inputPrices == "" || inputNumbers == "") {
                return;
            }
            var content = tbody.innerHTML;
            content = content + "<tr><td>" + inputNames + "</td><td>" + inputPrices + "</td><td>" + inputNumbers + "</td></tr>";
            var temp = {};
            temp.name = inputNames;
            temp.price = inputPrices;
            temp.number = inputNumbers;
            array.push(temp);
            tbody.innerHTML = content;

        });
        // 排序
        var swap = function(oldIndex, newIndex) {
            var temp = array[oldIndex];
            array[oldIndex] = array[newIndex];
            array[newIndex] = temp;
        }
        var showlist = function() {
            var content = "";
            for (var i = 0; i < array.length; i++) {
                content = content + "<tr><td>" + array[i].name + "</td><td>" + array[i].price + "</td><td>" + array[i].number + "</td></tr>";
            }
            tbody.innerHTML = content;
        }

        btnZ.addEventListener("click", function(e) {
            for (var i = 0; i < array.length; i++) {
                var min = array[i].price;
                var minIndex = i;
                for (var j = i + 1; j < array.length; j++) {
                    if (array[j].price < min) {
                        min = array[j].price;
                        minIndex = j;
                    }
                }
                if (minIndex != i) {
                    swap(i, minIndex);
                }
                console.log(array);
                showlist();
            }
        })

        btnD.addEventListener("click", function(e) {
                for (var i = 0; i < array.length; i++) {
                    var max = array[i].price;
                    var maxIndex = i;
                    for (var j = i + 1; j < array.length; j++) {
                        if (array[j].price > max) {
                            max = array[j].price;
                            maxIndex = j;
                        }
                    }
                    if (maxIndex != i) {
                        swap(i, maxIndex);
                    }
                    console.log(array);
                    showlist();
                }
            })
            // 搜索
        var contents = "";
        btnSrh.addEventListener("click", function(e) {
            var searchBoxs = searchBox.value;
            for (var i = 0; i < array.length; i++) {
                if (searchBoxs == array[i].name) {
                    show = array[i];
                    // return show;

                }
            }
            contents = contents + "<li>商品:" + show.name + "</li><li>价格:" + show.price + "</li><li>数量:" + show.number + "</li>";
            ul.innerHTML = contents;
        })


    }
</script>

</html>